<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Employee Info</title>
</head>
<body>

<table id = "dataTable" border="1" cellspacing="0" cellpadding="0" style = "text-align: center;">
    <tr>
        <th colspan="5">Employee Info</th>
    </tr>
    <tr>
        <th>id</th>
        <th>lastName</th>
        <th>email</th>
        <th>gender</th>
        <th>options(<a th:href = "@{/toAdd}">add</a>)</th>
    </tr>

    <tr th:each = "employee:${employeeList}">
        <td th:text = "${employee.id}"></td>
        <td th:text = "${employee.lastName}"></td>
        <td th:text = "${employee.email}"></td>
        <td th:text = "${employee.gender}"></td>
        <td>
            <a @click = "deleteEmployee" th:href="@{'/employee/' + ${employee.id}}">delete</a>
            <a th:href="@{'/employee/' + ${employee.id}}">update</a>
        </td>
    </tr>

    <form id = "deleteForm" method = "post">
        <input type = "hidden" name = "_method" value = "delete">
    </form>

    <script type = "text/javascript" th:src = "@{/static/js/vue.js}"></script>
    <script type = "text/javascript">
        var vue = new Vue({
            el:"#dataTable",
            methods:{
                deleteEmployee:function(event){
                    //根据id获取表单元素
                    var deleteForm  = document.getElementById("deleteForm");
                    //将触发点击事件的超链接的href属性赋值给表单action
                    deleteForm.action = event.target.href;
                    //提交表单
                    deleteForm.submit();
                    //取消超链接的默认行为
                    event.preventDefault();
                }
            }
        });


    </script>


</table>

</body>
</html>